<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<title>Embedding a Widget into an existing HTML Page</title>
	<link rel="stylesheet" href="css/app.css">
	<link rel="stylesheet" href="css/jquery-ui-1.9.2.css">
	<link rel="stylesheet" href="css/demos.css">
	<script>
		
		// Setup a dedicated namespace if does not exist yet
		var OTCVANamespace = window.OTCVA || (window.OTCVA = {} );
		OTCVANamespace.loadingCompleted = false;

		OTCVANamespace.onReady = function( server, anchor ) {
			var script = window.document.getElementById(anchor),
		 		newjs = window.document.createElement('script'),
		 		appjs = window.document.createElement('script');

			if( OTCVA.loadingCompleted === true ) {
				return;
			}

			// IE
			newjs.onreadystatechange = function () {
				if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') {
					console.log("Not IE specific: Application loaded");
					window.document.getElementById('runMe').setAttribute('style','display: block');
					window.document.getElementById('loadMe').setAttribute('style','display: none');
				}	
			};
			
			// others
			newjs.onload = function () {
			      appjs.onload = function() {
					   console.log("Browser: Application loaded");
					   window.document.getElementById('runMe').setAttribute('style','display: block');
					   window.document.getElementById('loadMe').setAttribute('style','display: none');
			      };
               script = window.document.getElementById('OTCVA.MAIN.APP');
   		      appjs.src = 'http://' + server + ':8080/WebViewer/library/js/app.js';
			      script.parentNode.insertBefore(appjs);
			};
		
			newjs.src = 'http://' + server + ':8080/WebViewer/library/js/lv.js';
//   		newjs.setAttribute('data-main',"js/build/out/app");
			newjs.setAttribute('id',"OTCVA.MAIN.APP");
			script.parentNode.insertBefore(newjs, script.nextSibling);
			OTCVANamespace.loadingCompleted = true;
			OTCVANamespace.serverName = server;
         // TODO - store the server that aswers he document context all!
			// OTCVANamespace.serverName = "149.235.139.153" // TODO - Comment this line in real use
		}
	</script>
   <!-- <<< This is a workaround only, the helper object "TEXT.JS" doe not work ... -->
   <script type="text/template" id="bookTemplate">
<img src="<%= coverImage %>" width="77px"/>
<ul>
	<li><%= title %></li>
	<li><%= author %></li>
	<li><%= (new Date(releaseDate)).getFullYear() %></li>
	<li><%= keywords %></li>
</ul>
<button class="remove_a_book">Delete</button>
   </script>
   <!-- >>> -->
</head>
<!-- <body onload='use("localhost")'> -->
<body>
	<div id="appview"> <!-- global application view * BEGIN -->
		<span><a id="loadMe" style="display: block" href='javascript:window.OTCVA.onReady("149.235.139.153","appview")'>Make Instance</a></span>
		<span><a id="runMe" style="display: none" href='javascript:window.OTCVA.showDocument("this_is_descriptor_of_document_to_show")'>Run Instance</a></span>
		<span id="addBookButton" style="display: block"><a href="#addBookForm">Add Book</a></span>
		<span id="showLibraryButton" style="display: none"><a  href="#showLibrary">Library</a></span>
		<div id="books" style="display: block">  <!-- widget LibraryView * BEGIN -->
			<form>
				<div>
					<button id="yetAnotherAdd">Context Text</button>
				</div>
			</form>
			<!-- HERE ARE PUT THE BOOKS -->
		</div> <!-- widget LibraryView * END -->
		<div id="addBookContainer" style="display: none">
			<form id="addBook" action="#">
			<div>
				<label for="coverImage">CoverImage: </label><input id="coverImage" type="file" />
				<label for="title">Title: </label><input id="title" type="text" />
				<label for="author">Author: </label><input id="author" type="text" />
				<label for="releaseDate">Release date: </label><input id="releaseDate" type="text" />
				<label for="keywords">Keywords: </label><input id="keywords" type="text" />
				<button id="add">Add</button>
			</div>
			</form>
		</div>
		<div id="bookShelf"> <!-- widget BookShelf * BEGIN -->
			<form id="newForm" action="#">
				<div>
					<button id="newItem">Context Test (global)</button>
				</div>
			</form>
		</div> <!-- widget BookShelf * END -->

	</div>

</body>
</html>
